<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../js/echarts.js"></script>
    <style>
        .dataBox,.barBox{
            width:100%;
            height:310px;
        }
        #app{
            border:1px solid #236996;
        }
        #data_a,#data_b,#data_c,#app,#app_a,#app_b{
            width:344px;
            height:300px;
            border:1px solid #236996;
            display: inline-block;
            margin-left:20px;
            margin-top:20px;
            float:left;
        }
        .detail_a,.detail_b,.detail_c{
            margin-top:20px;
            width:380px;
            float:left;
        }
        .total{
            font-size:80px;
            color: orange;
            margin-left:115px;
        }
        .titie_a{
            margin-left:125px;
        }
        .titie_b{
            margin-left:148px;
        }
        .titie_c{
            margin-left:162px;
        }
        .bottom_a,.bottom_b,.bottom_c{
            width:250px;
            height:140px;
            line-height:140px;
            margin-left:80px;
        }
        .bottom_a a,.bottom_b a,.bottom_c a{
            color:#4CB3FF;
        }

    </style>
</head>
<body>
<div id="container">

    <div class="dataBox">
        <div id="data_a">
            <div class="detail_a">
                <span class="titie_a">累计注册总人数</span><br/>
                <span class="total">27</span>
                <div class="bottom_a">昨日新注册人数:100&nbsp;<a href="https://www.baidu.com/">查看详情</a></div>
                <a href=""></a>
            </div>
        </div>
        <div id="data_b">
            <div class="detail_b">
                <span class="titie_b">乘梯总次数</span><br/>
                <span class="total">180</span>
            </div>
            <div class="bottom_b">昨日乘梯次数:80&nbsp;<a href="https://www.baidu.com/">查看详情</a></div>
        </div>
        <div id="data_c">
            <div class="detail_c">
                <span class="titie_c">充值总额</span><br/>
                <span class="total">980</span>
            </div>
            <div class="bottom_c">昨日充值金额:500&nbsp;<a href="https://www.baidu.com/">查看详情</a></div>
        </div>

    </div>

    <div class="barBox" style="margin-top:10px;">
        <div id="app"></div>
        <div id="app_a"></div>
        <div id="app_b"></div>
    </div>

</div>
<script type="text/javascript" src="../js/lift.js"></script>
<script>
    var myChart=echarts.init(document.getElementById('app'));
    app.title = '坐标轴刻度与标签对齐';
    var myChart_a=echarts.init(document.getElementById('app_a'));
    app_a.title = '坐标轴刻度与标签对齐';
    var myChart_b=echarts.init(document.getElementById('app_b'));
    app_b.title = '坐标轴刻度与标签对齐';

    option = {
        title : {
            text: '注册人数',
            left:'center'//设置标题的位置
        },
        color: ['#3398DB'],
        /*        tooltip : {
                    trigger: 'axis',
                    barGap:'10px',//柱状的间距
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },*/
        legend: {
            data:['4.16','4.17','4.18','4.19','4.20'],//和下面series中的name一一对应
            bottom:10,//设置图例位置
            itemWidth:10,//设置图例大小
            itemHeight:10
        },
        grid: {
            height:'160px',
            left: '5%',
            right: '5%',
            bottom: '20%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['4.16','4.17','4.18','4.19','4.20','4.21','4.22'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接访问',
                type:'bar',
                barWidth: '30%',
                /* barWidth: 20,//柱状的宽度*/
                barGap:'10px',//柱状的间距
                data:[200, 210, 300, 334, 420, 330, 520]
            }
        ]
    };
    option_a = {
        title : {
            text: '乘梯次数',
            left:'center'//设置标题的位置
        },
        color: ['#3398DB'],
        /*        tooltip : {
                    trigger: 'axis',
                    barGap:'10px',//柱状的间距
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },*/
        legend: {
            data:['4.16','4.17','4.18','4.19','4.20'],//和下面series中的name一一对应
            bottom:10,//设置图例位置
            itemWidth:10,//设置图例大小
            itemHeight:10
        },
        grid: {
            height:'160px',
            left: '5%',
            right: '5%',
            bottom: '20%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['4.16','4.17','4.18','4.19','4.20'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接访问',
                type:'bar',
                barWidth: '30%',
                /* barWidth: 20,//柱状的宽度*/
                barGap:'10px',//柱状的间距
                data:[200, 210, 300, 334, 520, 330, 220]
            }
        ]
    };
    option_b = {
        title : {
            text: '充值金额',
            left:'center'//设置标题的位置
        },
        color: ['#236996'],
        /*        tooltip : {
                    trigger: 'axis',
                    barGap:'10px',//柱状的间距
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },*/
        legend: {
            data:['4.16','4.17','4.18','4.19','4.20'],//和下面series中的name一一对应
            bottom:10,//设置图例位置
            itemWidth:10,//设置图例大小
            itemHeight:10
        },
        grid: {
            height:'160px',
            left: '5%',
            right: '5%',
            bottom: '20%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['4.16','4.17','4.18','4.19','4.20'],
                axisTick: {
                    alignWithLabel: true
                }
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接访问',
                type:'bar',
                barWidth: '30%',
                /* barWidth: 20,//柱状的宽度*/
                barGap:'10px',//柱状的间距
                data:["0", "0", "0", "0", "0", "0", "0"]
            }
        ]
    };
    myChart.setOption(option);
    myChart_a.setOption(option_a);
    myChart_b.setOption(option_b);
</script>
</body>
